<template>
	<sys-container :label="'我的分销收益'" showBack :withoutTop="true">
		<template v-slot:content>
			<view class="warp">
				<view class="myCard">
					<image src="@/static/images/disBg.png" mode="aspectFill" style="width:100%;height:100%;position:absolute;top:0;z-index: 0;"></image>
					<view class="cardContent">
						<view class="">
							<text @tap="changeList(1)">明细</text> | <text @tap="changeList(2)">收入</text> | <text @tap="changeList(3)">提现</text>
							 
						</view>
						<view class="moneyContent">
							<view class="moneyDetail">
								<view class="detailTit">
									可提现余额
								</view>
								<view class="detailVal">
									{{showData.brokerage_price}}
								</view>
							</view>
							<view class="moneyDetail">
								<view class="detailTit">
									已提现余额
								</view>
								<view class="detailVal">
									{{showData.income}}
								</view>
							</view>
						</view>
						<view class="btnArea">
							<van-button color="#DA2627" custom-style="width:260rpx;height:60rpx;border-radius:60rpx;" @tap="toWithDraw">我要提现</van-button>
						</view>
					</view>
				</view>
			
				
				<scroll-view scroll-y="true" style="height:calc(100% - 510rpx);margin-top: 33rpx;">
					<view class="infoBox" v-if="activeIndex==1">
						<view class="singleInfo" v-for="(item,idx) in recordList" :key="idx">
							<view class="info" >
								<view class="desc">
									邀请{{item.nickname}}好友注册信息
								</view>
								<view class="time">
									<image src="../../../static/images/icon/icon-clock.png" style="width:22rpx;height:22rpx;margin-right:10rpx" mode=""></image>
									2023-08-27 15：20
								</view>
							</view>
							<view class="val">
								+{{item.sellout_money}}
							</view>
						</view>
					</view>
					<view class="infoBox" v-else-if="activeIndex==2">
						<view class="singleInfo" v-for="(item,idx) in moneyList" :key="idx">
							<view class="info" >
								<view class="desc">
									{{item.title}}
								</view>
								<view class="time">
									<image src="../../../static/images/icon/icon-clock.png" style="width:22rpx;height:22rpx;margin-right:10rpx" mode=""></image>
									{{item.add_time}}
								</view>
							</view>
							<view class="val">
								+{{item.number}}
							</view>
						</view>
					</view>
					<view class="infoBox" v-else>
						<view class="singleInfo" v-for="(item,idx) in withDrawList" :key="idx">
							<view class="info" >
								<view class="desc">
									{{item.title}}
								</view>
								<view class="time">
									<image src="../../../static/images/icon/icon-clock.png" style="width:22rpx;height:22rpx;margin-right:10rpx" mode=""></image>
									{{item.add_time}}
								</view>
							</view>
							<view class="val">
								+{{item.number}}
							</view>
						</view>
					</view>
				</scroll-view>
				
				<u-mask :show="showFlag" >
				  <view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
				    <view class="block" style="width:100%;background: #fff;overflow: auto;padding:20rpx	;">
						<view class="" style=";text-align: center;">
							<label for="" style="margin:20rpx 0">请输入提现金额</label>
							<van-field placeholder="请输入提现金额" type="digit" @input="changeNum" :value="money" custom-style="border:1rpx solid #ccc;margin:20rpx 0"/>
						</view>
						<view class="drawArea" style="display: flex;align-items:center;justify-content: space-between;width: 100%;">
							<van-button @tap="doHandle" color="#D10202" custom-style="width:260rpx" >确定</van-button>
							<van-button @tap="onClickHide" custom-style="width:260rpx" >取消</van-button>
						</view>
						
					</view>
				  </view>
				</u-mask>
			</view>
		</template>
	</sys-container>
</template>

<script>
	import {spreadIndex,spreadlist,withDraw,getSpreadList,getWithdrawalList} from '@/globalApi/requestApi.js'
	export default {
		data() {
			return {
				showData:{},
				params:{
					page:'1',
					limit:999,
				},
				recordList:[],
				showFlag:false,
				money:0,
				activeIndex:1,
				moneyList:[],
				withDrawList:[]
			}
		},
		onShow(){
			this.getData()
			this.getList()
		},
		methods: {
			changeList(type){
				this.activeIndex=type
				this.recordList=[]
				this.moneyList=[]
				this.withDrawList=[]
				if(type==1){
					this.getList()
				}
				else if(type==2){
					this.getMonList()
				}else{
					this.getWithDraw()
				}
			},
			getWithDraw(){
				let that = this
				getWithdrawalList().then(res=>{
					res.data.data.forEach(item=>{
						that.withDrawList=[...that.withDrawList,...item.list]
					})
				})
			},
			getMonList(){
				let that = this
				getSpreadList().then(res=>{
					res.data.data.forEach(item=>{
						console.log(item.list)
						that.moneyList=[...that.moneyList,...item.list]
					})
					console.log(that.moneyList)
				})
			},
			onClickHide(){
				this.showFlag =false
			},
			changeNum(e){
				this.money = e.detail
			},
			doHandle(){
				if(this.money>this.showData.brokerage_price){
					uni.showToast({
						title:'超过可提现余额！',
						icon:'none'
					})
					return
				}
				
				withDraw({
					extract_type:'weixin',
					money:this.money,
					weixin:'a1234'
				}).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:'提现成功！',
							icon:'success'
						})
						this.money=''
						this.showFlag=false
						this.getData()
						this.recordList=[]
						this.moneyList=[]
						this.withDrawList=[]
						if(this.activeIndex==1){
							this.getList()
						}else if(this.activeIndex==2){
							this.getMonList()
						}else{
							this.getWithDraw()
						}
					}
				})
			},
			toWithDraw(){
				this.showFlag = true
					
			},
			getData(){
				spreadIndex().then(res=>{
					console.log(res)
					this.showData =  res.data
				})
			},
			getList(){
				spreadlist(this.params).then(res=>{
					if(res.code==200){
						console.log(res.data.list)
						this.recordList = res.data.list
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.warp{
		height: 100%;
		box-sizing: border-box;
		padding: 22rpx 33rpx 38rpx 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background: #F6F6F6;
		.myCard{
			width:690rpx;
			height:450rpx;
			position:relative;
			border-radius: 20rpx;
			overflow: hidden;
			z-index:1;
			.cardContent{
				padding:52rpx 58rpx 37rpx;
				box-sizing: border-box;
				width:100%;
				height:100%;
				position:relative;
				z-index: 2;
				color:#fff;
				.moneyContent{
					margin-top: 54rpx;
					width:100%;
					display: flex;
					align-items: center;
					.moneyDetail{
						width:50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;
						.detailTit{
							font-size: 24rpx;
							font-weight: 400;
						}
						.detailVal{
							font-size: 55rpx;
							font-weight: bold;
							margin-top: 35rpx;
						}
					}
					
				}
				.btnArea{
					width:100%;
					margin-top: 40rpx;
					display: flex;
					justify-content: center;
					// text-align: center;
				}
			}
		}
	
		.infoBox{
			width:100%;
			padding:14rpx 30rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;
			.singleInfo{
				width:100%;
				box-sizing: border-box;
				padding:20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom:1rpx solid #ccc;
				.info{
					flex:1;
					.desc{
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}
					.time{
						margin-top: 15rpx;
						font-size: 18rpx;
						font-weight: 400;
						color: #888888;
						display:flex;
						align-items: center;
					}
				}
				.val{
					width:115rpx;
					height:40rpx;
					border:1rpx solid #DA2627;
					border-radius: 40rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #DA2627;
					line-height: 40rpx;
				}
			}
		}
	}
</style>